約 4,950,631 件
https://w.atwiki.jp/sevenlives/pages/31.html
HTML 読み：えいちてぃーえむえる 英語：HyperText Markup Language 別名： 意味： HTMLとはwebページを記述するためのマークアップ言語?のこと。 元々はハイパーテキスト?を解釈するためのものであったが現在ではページの見栄えなど人間にとって見やすくするための言語として発展している。 webブラウザはHTMLを解釈させwebページを整形された姿で閲覧することが出来る。 SGMLから派生したマークアップ言語だがインターネットの爆発的な広がりによりHTMLは独自の発展をとげる。 人間にとって優しく発展したためかwebブラウザによるHTMLの解釈はかなり柔軟で、いい加減な文書もなんとか表示してしまったためとその簡単な記述方法からインターネットの爆発的な広がりを後押しした。 現在のバージョンは4.01だがW3Cはweb標準に立ち返って厳密な記述を要求するXML準拠のXHTMLに移行させていくつもりのようだ。 HTML 4.0/4.01の文書型は 「Strict?」「Transitional?」「Frameset?」の３つがある。 2018年07月14日 Webブラウザ マークアップ マークアップ言語? ハイパーリンク 【link】 ハイパーテキスト? 文書型宣言 DTD 内容モデル 要素【element】? 属性【attribute】? 文字参照 SGML HTML 4.01 HTML5 XHTML XML SVG SMIL HTML WG? CSS Microformats クリッカブルマップ パラグラフ ダイナミックドキュメントクライアントプル サーバープッシュ? BBコード? テキストエディタ HTMLパーサ 文書型?Strict? Transitional? Frameset? ■ タグ script要素 htmlhead?meta title? body?h(1～6)? p? 空要素?br? a【アンカー要素】?フラグメント リスト要素ul?li? ol? dl?dt? dd? ブロックレベル要素 インライン要素 form【フォーム】input?text? radio? checkbox? submit? button? textarea? select?option? enctype?application/x-www-form-urlencoded? multipart/form-data htmlプラグインエラー このプラグインを使うにはこのページの編集権限を「管理者のみ」に設定してください。
https://w.atwiki.jp/projecthikky/pages/86.html
今日の課題：Canvasの状態セーブ コード https //paiza.io/projects/wL4BfxcJNIFDDhIWDvIohw 実行結果 https //out.paiza.io/projects/wL4BfxcJNIFDDhIWDvIohw/output.html !DOCTYPE html html head title HTML5の練習＠ヒッキープログラミングスレ /title style type="text/css" body { background-color silver; } canvas { background-color white; } /style /head body h4 状態セーブ /h4 canvas id="mycanvas" width="640" height="480" /canvas script language="javascript" type="text/javascript" function mydraw() { var canvas = document.getElementById( mycanvas ); var ctx = canvas.getContext( 2d ); ctx.beginPath(); ctx.fillStyle = black ; ctx.fillRect(0, 0, 150, 150); ctx.fillStyle = blue ; ctx.save(); // クリップや色がセーブされる ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(200, 100); ctx.lineTo(150, 200); ctx.closePath(); ctx.clip(); ctx.beginPath(); ctx.fillStyle = red ; ctx.rect(110, 100, 50, 100); ctx.fill(); ctx.restore(); // クリップが解除される！！色が戻る！ ctx.beginPath(); ctx.fillRect(400, 100, 100, 100); } mydraw(); /script /body /html save() でクリッピングの状態や色などの情報が保存される restore() save()したときのクリッピングの状態や色を戻せる
https://w.atwiki.jp/testlink/pages/57.html
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd" !-- Japanese Translated by Testing Engineer s Forum (TEF) in Japan, Working Group of TestLink Japanese Translation Project -- html xmlns="http //www.w3.org/1999/xhtml" lang="jp" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / meta http-equiv="Content-language" content="jp" / meta name="author" content="Martin Havlat" / meta name="copyright" content="GNU" / meta name="robots" content="NOFOLLOW" / title TestLink Instructions /title link rel="stylesheet" type="text/css" href="{$basehref}{$smarty.const.TL_THEME_CSS_DIR}tl_docs.css" / /head body div class="workBack" h1 結果/テストレポートとメトリクスの概要 /h1 h1 レポートのコントロール /h1 h2 1. 有効なビルドの選択 /h2 "アクティブビルド"というコントロールにより、レポートを表示する対象となるビルドを選択することができます。 h2 2. レポートフォーマット /h2 (チャートを除く)全てのテストレポートは以下の３種類の方法で表示することができます li 1. normal - Webページにレポートが表示 /li li 2. MS Excel - Microsoft Excel用にレポートをエクスポート /li li 3. HTML email - ユーザのアドレスにEメールでレポートを送信 /li h1 レポート /h1 現在のTestLinkのバージョンでは、10種類のレポートを表示することができます。各レポートの目的と機能を以下で説明します。 h3 1)有効なビルドのレポート /h3 p このレポートは"アクティブビルド"コントロールで選択したビルドについての詳細なテスト結果を表示します。選択したビルドの結果のみを表示します。以下の表を表示します BR h2 トップレベルのテストスイートの結果 /h2 p トップレベルのスイートの結果を一覧表示します。成功、失敗、ブロック、未実行のテストケースの合計、そして完了率を表示します。"完了した"テストケースとは、成功、失敗、ブロックの結果となったテストケースのことです。トップレベルスイートの結果には全ての子スイートの結果を含みます。 /p h2 テストスイートごとの結果 /h2 p トップレベルスイートだけでなく、全てのスイートの結果を表示します。 /p h2 キーワードごとの結果 /h2 p 現在のテスト計画のテストケースに割り当てられているキーワードを全て表示します。またそのキーワードに関連するテストケースを表示します。 /p /p h3 2)一般的なテスト計画のメトリクス /h3 p このページでは、テストスイート、オーナー、キーワードごとのテスト計画の最新のステータスを表示します。"最新のテスト結果"とは、最後に実行したビルドに関するテストケースの結果を示しています。例えば、複数のビルドにわたってあるテストケースを実行した場合は、最新の結果のみが反映されます。 /p "最新のテスト結果"は多くのレポートで使用される概念で、以下のように決められます li 1)テスト計画に追加された順番によって、ビルドの新旧が決まります。ビルドの最新のビルドの結果は古いビルドの結果よりも優先されます。例えば、ビルド1で"失敗"したテストケースでも、ビルド2で"成功"していれば、最新の結果は"成功"となります。 /li li 2)あるテストケースが同じビルド内で複数回実行された場合は、最新の実行結果が優先されます。例えば、ビルド3のリリース後、テスター1よって午後2時に"成功"したテストケースでも、テスター2によって午後3時に"失敗"と記録されれれば、最新の結果は"失敗"となります。 /li li 3)未実行のビルドがある場合は、そのテストケースの結果にはそのビルドは影響しません。例えば、ビルド1で"成功"したテストケースが、テスト2で"未実行"だった場合は、最新の結果は"成功"となります。 /li BR/ 以下の表が表示されます BR/ h2 最上位のテストスイートごとの結果 /h2 p 各最上位スイートの結果が一覧表示されます。成功、失敗、ブロック、未実行のテストケースの合計、そして完了率を表示します。"完了した"テストケースとは、成功、失敗、ブロックの結果となったテストケースのことです。トップレベルスイートの結果には全ての子スイートの結果を含みます。 /p h2 キーワードごとの結果 /h2 p 現在のテスト計画のテストケースに割り当てられているキーワードを全て表示します。またそのキーワードに関連するテストケースを表示します。 /p h2 オーナーごとの結果 /h2 p 現在のテスト計画の中で、各オーナーに割り当てたれたテストの結果を一覧表示します。未割り当てのテストケースは、"未割り当て"という見出しのもとに集計されます。 /p h3 3.)総合的なビルドのステータス /h3 p 全ビルドの実行結果を一覧表示します。各ビルドのテストケースの合計数、成功数、成功率、失敗数、失敗率、ブロック数、ブロック率、未実行数、未実行率を表示します。もし、同一ビルドでテストケースが複数回実行されている場合は、最新のテスト結果が考慮されます。 /p h3 4.)クエリーのメトリクス /h3 p このレポートはクエリー入力ページと、クエリーデータを含むクエリー出力ページから構成されます。 h2 クエリー入力ページ /h2 p 4種類のコントロールでクエリーを形成することができます。デフォルトでは、最も多くのテストケースとビルドを選択するように各コントロールが設定されています。コントロールを変更することにより、指定したオーナー、キーワード、テストスイート、ビルドの組み合わせによって、レポートに表示される結果をフィルタリングすることができます。 /p h2 キーワード /h2 p 0個または1個のキーワードを選択することができます。デフォルトでは、キーワードは選択されていません。キーワードが選択されていない場合は、キーワード割り当てに関係なく、全てのテストケースに関する結果を表示します。キーワードはテスト仕様のページもしくは、キーワード管理のページで割り当てることができます。キーワードは、全テスト計画の全バージョンのテストケースにわたって割り当てることができます。特定のキーワードが割り当てられているテストケースの結果に興味がある場合は、このコントロールにキーワードを設定してください。 /p h2 オーナー /h2 p 0人または1人のオーナーを選択することができます。デフォルトではオーナーは選択されていません。 オーナーが選択されていない場合は、オーナーの割り当てに関係なく、全てのテストケースに関する結果を表示します。"未割り当て"のテストケースは検索できません。オーナーシップは、"テスト実行の割り当て"のページで割り当てることができ、テスト計画ごとに割り当てられます。特定のテスターが実行したテストケースの結果に興味がある場合は、このコントロールにオーナーを設定してください。 /p h2 トップレベルテストスイート /h2 p 0個からn個のトップレベルテストスイートを選択することができます。デフォルトでは全てのテストスイートが選択されています。選択したテストスイートの結果のみが、クエリーのメトリクスに反映されます。特定のテストスイートの結果に興味がある場合は、このコントロールを操作してください。 /p h2 ビルド /h2 p 1個からn個のビルドを選択することができます。デフォルトでは全てのビルドが選択されています。選択したビルドでの実行結果のみを使用してメトリクスが計算されます。例えば、最後の3回のビルドで、いくつのテストケースを実行したかを調べたい場合は、このコントロールを操作してください。キーワード、オーナー、トップレベルテストスイートを選択することで、テスト計画ごと、テストスイートごとのメトリクスの計算に使用するテストケースの数を変化させることができます。例えば、オーナー="Greg"、キーワード="優先度1"と全テストスイートを選択した場合は、Gregに割り当てられた優先度1のテストケースのみが計算に使用されます。レポートの"テストケース数"の合計は、これら3種類のコントロールによって決められます。ビルドの選択は、"成功"、"失敗"、"ブロック"、"未実行"の数に影響します。先に説明した、"最新のテスト結果"のルールを参照してください。 /p "クエリーを送信"ボタンをクリックすると、クエリー出力ページが表示されます。 /p h2 クエリ出力ページ /h2 ページには以下のレポートが表示されます br/ li 1. レポートを作成するために使用したクエリーパラメータ /li li 2. テスト計画内の合計 /li li 3. スイートごとの全実行結果の合計 (総テストケース数 / 成功 / 失敗 / ブロック / 未実行)。もし、あるテストケースを複数のビルドで複数回実行した場合、選択したビルドに関連する全ての実行結果を表示します。しかし、テストスイートの実行結果の概要には、選択したビルドに対する"最新のテスト結果"のみが反映されます。 /li h3 5-7.)ブロック、失敗、未実行のテストケースのレポート /h3 p これらのレポートは、ブロック、失敗、未実行の全テストケースを表示します。"最新のテスト結果"のルール（一般的なテスト計画のメトリクスの項で説明しました）によって、テストケースがブロック、失敗、未実行に該当するかどうかを判定します。TestLinkとバグトラッキングシステムを統合して使用している場合は、ブロックと失敗のレポートに関連するバグが表示されます。 /p h3 8.)テストレポート /h3 p 全ビルドの全テストケースのステータスを表示します。同一ビルド内でテストケースが複数回実行された場合は、最新の結果が表示されます。このレポートでは、"?" マークを未実行のテストケースを表わすために使用します。大量のデータを使用している場合は、ブラウジングが簡単なExcel形式で出力することをお勧めします。 /p h3 9.)チャート /h3 p このレポートページを表示するためにはflashプラグインが必要です。グラフィカルに結果を表示するために http //www.maani.us が提供している flash 技術を使用しています。4種類のチャートに表示される結果は、"最新のテスト結果"のルールに従って計算されます。グラフのアニメーションは、ユーザが現在のテスト計画のメトリクスを把握するための手助けとなるでしょう。 /p 以下の4種類のチャートが表示されます h2 1. 成功 / 失敗 / ブロック / 未実行のテストケースを表わす円グラフ /h2 h2 2. キーワードごとの結果を表わす棒グラフ /h2 h2 3. オーナーごとの結果を表わす棒グラフ /h2 h2 4. トップレベルスイートごとの結果を表わす棒グラフ /h2 p 棒グラフは、成功、失敗、ブロック、未実行のテストケース数を近似的に示しています。 /p h3 10.)各テストケースのバグの合計 /h3 p このレポートは、テストプロジェクト内のバグが発見されたテストケースを表示します。このレポートはバグトラキングシステムが接続されている場合のみ表示されます。 /p /div /body /html
https://w.atwiki.jp/webdesignmemo/pages/32.html
関連トピックス 【CSS】ブラウザのスタイルをリセットするスタイルシート集 | コリス CSSNite in Nagoya 2007 極力ハックしない CSS by 山田あかね(purprin) 役立つサイト CSSレイアウト実践講座 とほほのスタイルシート入門 Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。 公式サポートサイト サンプルダウンロードのページが参考になる。 CSS HappyLife CSS-EBLOG CSSめっちゃ不器用やねん リンク名 memo リセット CSS(2009.02.07の時点+コメントで説明つき) Yahoo! UI Library /* 各要素のmargin.paddingの正規化 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin 0; padding 0; } /* tabel要素のセルのボーダーとボーダーの間隔を0に */ table { border-collapse collapse; border-spacing 0; } /* fieldsetやimg要素のボーダーを削除 */ fieldset,img { border 0; } /* font-styleやfont-weightプロパティの正規化 */ address,caption,cite,code,dfn,em,strong,th,var { font-style normal; font-weight normal; } /* ol、ul要素のlist-styleを削除 */ ol,ul { list-style none; } /* captionやth要素を左揃えに */ caption,th { text-align left; } /* 見出し要素のフォントサイズ、太さの正規化 */ h1,h2,h3,h4,h5,h6 { font-size 100%; font-weight normal; } /* q要素の引用マークを削除 */ q before,q after { content ; } /* 略語のボーダーを削除 */ abbr,acronym { border 0; } タグの順番 /* mozilla.org Base Styles * maintained by fantasai * (classes defined in the Markup Guide - http //mozilla.org/contribute/writing/markup ) */ /* Suggested order * display * list-style * position * float * clear * width * height * margin * padding * border * background * color * font * text-decoration * text-align * vertical-align * white-space * other text * content * */ 名前 コメント
https://w.atwiki.jp/h3djp/pages/18.html
H3DAPIを使った例H3DAPIに含まれて配布されている例X3Dのみを使用した例 X3DとPythonを使用した例 C++を使用した例 VRMLの例 H3DAPIに含まれていない例X3DとPythonを使用した例触覚デバイスを使ってテクスチャーをペイントする C++を使用した例 拡張H3DAPI H3DAPIを使った例 H3DAPIに含まれて配布されている例 H3DAPI/examplesフォルダに移動し、検索パスを入力すれば、参照することができるでしょう。 X3Dのみを使用した例 X3Dファイルのみが使用されている例がこちらです。中にはH3Dの固有ノードが利用されているものもあります。 CubeMap/CubeMap.x3d - ComposedCubeMapTextureノードを使ったデモ。 DepthMapSurface/depthMappedITS.x3d - DepthMapSurfaceノードを使って、シンプルな板の触覚を表現。OpenHapticsrendererは利用していません。 DepthMapSurface/depthMappedSphere.x3d - DepthMapSurfaceノードを使って、球形の触覚を表現。OpenHapticsrendererは利用していません。 ForceEffects/forcefield.x3d - ForceFieldノードのデモ。触覚デバイスを右に押そうとする力を発生させます。 ForceEffects/magneticGeometryEffect.x3d - MagneticGeometryEffectノードのデモ。 スプリングはジオメトリの表面に向かって触覚学装置を引きよせます。 ForceEffects/positionFunctionEffect.x3d - PositionFunctionEffectノードのデモ。位置情報から触覚デバイスへ送る力を計算します。 ForceEffects/timeFunctionEffect.x3d - TimeFunctionEffectノードのデモをします。時間によって触覚デバイスへ送る力を計算します。 HapticLayers/hapticLayers.x3d - 異なった表面の表現法を示しています。箱の中に別の箱が入っていますが、質感はそれぞれ異なります。 magneticlines/magneticlines.x3d - 引き寄せる性質を持つ線を表示します。OpenHapticsrendererのみを利用しています。 Shader nodes/cg_glass.x3d - H3DAPIでどうシェーダを使用するかの例。ガラスで作られているように見せるためCG言語を使用します。 Shader nodes/glsl_polkadot.x3d - H3DAPIでどうシェーダを使用するかの例。 赤色の表面に白いドットがあるように見せるためGLSL言語を使用します。 Sound - Soundノードを用いたデモ。音は触覚デバイスの後を追います。 SuperShape/SuperShape.x3d - SuperShapeノードのデモ。 x3dmodels - このディレクトリには、X3D定義の3Dモデルを含んでいるサブディレクトリがあります。 Sceneへロードされると、触覚デバイスでそれらに触れることができます。 X3DとPythonを使用した例 bumpmap/bumpmap.x3d - MultiTextureノードとPythonを使用することで隆起を表現しています。 触覚学装置は光源を置くのに使用されます。 DeformableShape/deform.x3d - DeformableShapeノードを使用して、膜のようなオブジェクトを簡単に変形させます。変形させる形をPythonによって出力しています。 DynamicTransform/dynamic.x3d - 押すと均衡に戻ろうとするDynamicTransformノードの機能を示します。 flight/flight.x3d - 仮想世界での飛行をシンプルに表現しています。触覚デバイスが認識されていない場合は、キーボード入力となります。 ForceEffects/springs.x3d - SpringEffectノードのデモ。 manualExamples/Python/Sphere.x3d - マニュアルとしての例。マウス左ボタンが押されたら球の色を変えます。 manualExamples/Python/Spheres.x3d - マニュアルとしての例。 マウス左ボタンが押された時、新しい球をランダムの色で追加します。 Shader nodes/cg_earthshader.x3d - H3DAPIでどうシェーダを使用するかの例。 地球を照らす太陽のイミテーションとして触覚学装置を使用できるようにCG言語を使用します。 Shader nodes/glsl_earthshader.x3d - H3DAPIでどうシェーダを使用するかの例。 地球を照らす太陽のイミテーションとして触覚学装置を使用できるようにGLSL言語を使用します。 SpaceTennis/SpaceTennis.x3d - ラケットを触覚デバイスによって制御する簡単なテニスゲーム。 ラケットがボールに当るとき、フォース・フィードバックを与えます。 C++を使用した例 manualExamples/C++/CMakeLists.txt--マニュアルからの例。 SphereとSpheresの形状ファイルを発生させるためにCMakeを使用します。 manualExamples/Python/Sphere.x3dとmanualExamples/Python/Spheres.x3dのC++バージョン。 ParticleDemo--ソースを調べるときだけ参照してください。Particle Systemsコンポーネントのデモをする不完全な例。 ThreadExample--H3DAPIでスレッドをセットアップすることの例。 H3DLoadとH3DViewerは例のあるフォルダに位置していませんが、H3DAPIを使用するプログラムの例とみなせます。 VRMLの例 Paintable board example using SFImage in SpiderMonkey H3DAPIに含まれていない例 X3DとPythonを使用した例 触覚デバイスを使ってテクスチャーをペイントする ここでは触覚デバイスを鉛筆代わりに使ってテクスチャに色を塗る、簡単な例を紹介します。 ただし、この例では大きすぎるテクスチャを使った場合に満足な結果を得られない事が予測されますので、C++へのアプローチが必要になるかもしれません。 C++へのアプローチとしてPaintableTexture tutorialを見ておくといいでしょう。 #paintTexture.x3d Group Transform rotation="1 0 0 0" Shape Appearance DEF="APPEARANCE" Material/ SmoothSurface / /Appearance Rectangle2D DEF="GEOM" size="0.4 0.4" solid="FALSE" / /Shape /Transform PythonScript DEF="PS" url="paintTexture.py" Appearance USE="APPEARANCE" containerField="references" / /PythonScript ROUTE fromNode="GEOM" fromField="contactTexCoord" toNode="PS" toField="drawTexCoord"/ /Group #paintTexture.py from H3DInterface import * # make sure the proxy is drawn at the position of the haptics device tex_channels = 1 tex_size_s = 32 tex_size_t = 32 tex_matrix = [] for i in range( tex_size_s * tex_size_t ) tex_matrix.append( "0xFF" ) appearance_node, = references.getValue() string_of_values = "" for i in tex_matrix string_of_values= string_of_values + i + " " pixelTexture = createX3DNodeFromString( """ PixelTexture repeatS="false" repeatT="false" image=" %i %i %i %s" / """ % (tex_size_s, tex_size_t, tex_channels, string_of_values) )[0] appearance_node.texture.setValue( pixelTexture ) class DrawTexCoord( AutoUpdate( MFVec3f ) ) def update( self, event ) event_value = event.getValue() for value in event_value # added because 0,0,0 is sent as first event, maybe due to resize. if value.x == value.y == value.z == 0 return event_value s_index = int(value.x * tex_size_s) if s_index = tex_size_s s_index = tex_size_s - 1 t_index = int((1 - value.y) * tex_size_t) if t_index = tex_size_t t_index = tex_size_t - 1 if( tex_matrix[t_index * tex_size_t + s_index] != "0x50" ) tex_matrix[t_index * tex_size_t + s_index] = "0x50" string_of_values = "" for i in tex_matrix string_of_values= string_of_values + i + " " pixelTexture = createX3DNodeFromString( """ PixelTexture repeatS="false" repeatT="false" image=" %i %i %i %s" / """ % (tex_size_s, tex_size_t, tex_channels, string_of_values) )[0] appearance_node.texture.setValue( pixelTexture ) return event_value drawTexCoord = DrawTexCoord() C++を使用した例 拡張C++の例 親切なフォーラムユーザーが数々の特徴的な例を出してくれています。 拡張H3DAPI ソースコードを見てみましょう。 X3D_prefixやH3D-prefixでクラスから継承するのは、基本クラスを表す関数の実装例です。 また、VHTKとUIノードは、H3DAPIを拡張する方法の良い例です。これらのライブラリのソースコードを見てみましょう。 ここもチェックしてください。advanced H3DAPI programming.
https://w.atwiki.jp/projecthikky/pages/88.html
今日の課題：Canvasで回転させて描く コード https //paiza.io/projects/gOHUSH5OiRw2yDEWBuxzeA 実行結果 https //out.paiza.io/projects/gOHUSH5OiRw2yDEWBuxzeA/output.html !DOCTYPE html html head title HTML5の練習＠ヒッキープログラミングスレ /title style type="text/css" body { background-color silver; } canvas { background-color white; } /style /head body h4 回転させて描く /h4 canvas id="mycanvas" width="640" height="480" /canvas script language="javascript" type="text/javascript" function rad(d) { return 2.0 * Math.PI * (d / 360.0); } function mydraw() { var canvas = document.getElementById( mycanvas ); var ctx = canvas.getContext( 2d ); ctx.beginPath(); ctx.strokeStyle = red ; ctx.strokeRect(100, 100, 100, 50); ctx.beginPath(); ctx.rotate(rad(10)); ctx.strokeStyle = blue ; ctx.strokeRect(100, 100, 100, 50); ctx.beginPath(); ctx.rotate(rad(10)); // 回転は累積する ctx.strokeStyle = green ; ctx.strokeRect(100, 100, 100, 50); } mydraw(); /script /body /html rotate(a) Canvasの左上端(0,0)を中心にa度だけ時計回りに回転させた描画ができる
https://w.atwiki.jp/testlink/pages/37.html
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""DTD/xhtml1-transitional.dtd" !-- Japanese Translated by Testing Engineer s Forum (TEF) in Japan, Working Group of TestLink Japanese Translation Project -- html xmlns="http //www.w3.org/1999/xhtml" lang="jp" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / meta http-equiv="Content-language" content="jp" / meta name="author" content="Martin Havlat" / meta name="copyright" content="GNU" / meta name="robots" content="NOFOLLOW" / title TestLink Instructions /title style media="all" type="text/css" @import "{$basehref}{$smarty.const.TL_THEME_CSS_DIR}testlink.css"; /style script // need due to global coupling in open_help_window()var fRoot= {$basehref} ; /script script type="text/javascript" src="{$basehref}gui/javascript/testlink_library.js" /script /head body div class="workBack" h1 テストケースの編集とアーカイブ /h1 h2 目的 /h2 p span class="help" onclick="javascript open_help_window( glosary , {$locale} );" テスト仕様書 /span は、存在する span class="help" onclick="javascript open_help_window( glosary , {$locale} );" テストプロジェクト /span , テストスイート,そして span class="help" onclick="javascript open_help_window( glosary , {$locale} );" テストケース /span の情報を閲覧したり変更したりする場所です。異なるバージョンのテストケースを見ることもできます。 /p h2 やってみましょう！ /h2 ol li テストプロジェクトをナビゲーションシートから選択します。 /li li 新規のテストスイートとテストケースを作成します(テストプロジェクトの変更は右上のプルダウンリストから選択できます) /li li 左横にあるツリーにてデータ編集を指示します。 /li li 作成したテスト仕様書をテストケースが準備完了したときに span class="help" onclick="javascript open_help_window( glosary , {$locale} );" テスト計画 /span に割り当てます。 /li /ol p TestLinkはテストケースを構成するN レベルのテストスイートを提供します。また、テストスイートの内容を記述できます。この情報はテストケースとともに印刷されます。 /p /div /body /html
https://w.atwiki.jp/memo77/pages/26.html
PageLastUpdate 2012-07-05/today - /yesterday - 印刷時のみ適用するcss ありがちな間違い tDiaryテーマとはてなテーマDOCUTYPE宣言ではまった はてなのメニュー部分ではまった wikiで使うための数値実体参照 Internet Explorer Developer Toolbar あなたのページを最速にする14の掟 よく使うサイト comment とにかく基本はAnother HTML-lint gatewayで自分のサイトをチェックして、ダメなところを徹底的に潰すこと。これをやってるうちに、少しづつ知識がついてくる。 印刷時のみ適用するcss とりあえず＠ウィキのこのデザインで印刷時に余計な要素を表示させないサンプル 2012/07/05 @media print { form {display none; } .noprint {display none; } .ddsmoothmenu {display none; } .header {display none; } .footer {display none; } .ads {display none; } #body-footer {display none; } .outer { border-left none; border-right none; } body { font 8pt serif; }} ありがちな間違い スクリプトでcgi呼び出すときに、パラメータ中に?a=1 b=2みたいな記述があるときに を にし忘れる。 tDiaryテーマとはてなテーマ 2007/05/01 なんかtDiaryのテーマとか選んでいるうちに、いじらざるを得なくなってきた。せっかくなので勉強しよう。 tDiaryテーマの作り方 http //www.tdiary.org/doc/HOWTO-make-theme.html テーマ向けHTMLの構造図解 http //tnat.net/img/tdiary_css.png テーマ別によるスタイルシートサンプル http //joram.agz.jp/hatena/theme_body.html#link DOCUTYPE宣言ではまった 2007/05/04 検索語：はてなダイアリー/スキン/テーマ/デザイン/tdiary/崩れる adiareyとimg0chに同じテーマを指定しても同じにならない。adiaryははてなとほぼ同じになるけどimg0chが崩れます。 要素を一個一個つぶしていっても直らない。まったく同じ構造までたどり着いて、img0chのDOCUTYPE宣言にloose.dtdがついてるのに気が付く。 adiary/はてな !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" img0ch !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http //www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" tDiary !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http //www.w3.org/TR/html4/strict.dtd" で、これが原因でしたorz そっかー、dtdのあるなしで標準モードと互換モードというのがあるのね。勉強になった・・・ http //desperadoes.biz/style/mode.php 追記：と思ったら、tDiaryはTransitionalじゃなくてstrict.dtdがついてる。これはデザインの共有で問題にならないのかしらん？ さらに追記：img0chのテンプレートや吐き出されてるのは !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" だった。なんで勘違いしたかというと、IEからHTMLとして保存すると、自動的に !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http //www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" になるようだ。 はてなのメニュー部分ではまった はてなの一番上のメニュー部分はテーマによって違うらしい。テーブルレイアウトでくるときとそうじゃないときがあるよ。 たぶん古い table border="0" width="100%" cellspacing="0" cellpadding="0" id="banner" ... たぶん新しい div id="simple-header" ... wikiで使うための数値実体参照 2007/05/05 HTMLで使える文字実体参照 http //www.ne.jp/asahi/minazuki/bakera/html/reference/charref 文字 数値実体参照 用途 | | テーブル中で|を書く必要があるとき Internet Explorer Developer Toolbar 2007/05/11 Webページの構造を検証できるMicrosoft純正IE用プラグイン。 http //www.forest.impress.co.jp/article/2007/05/11/iedevtoolbar.html あなたのページを最速にする14の掟 http //blog.livedoor.jp/dankogai/archives/50828720.html HTTPリクエストは最小限に - Make fewer HTTP requests CDNを活用 - Use a CDN Expiresヘッダを利用 - Add an Expires header コンテンツはGzipせよ - Gzip components CSSは上に - Put CSS at the top JSは下に - Move JS to the bottom CSSのexpressionの利用は控えよ - Avoid CSS expressions JSとCSSは外部化せよ - Make JS and CSS external DNS参照を抑えよ - Reduce DNS lookups JSを「縮刷」せよ - Minify JS リダイレクトは控えよ - Avoid redirects スクリプトの重複を削除せよ - Remove duplicate scripts ETagはオフにせよ - Turn off ETags AJAXを小さくしてキャッシュ可能にせよ - Make AJAX cacheable and small よく使うサイト HTML鳩丸倶楽部 http //www.ne.jp/asahi/minazuki/bakera/html/hatomaru comment このページの記述で聞きたいこととか間違ってることとかありましたらコメントを。 名前 コメント すべてのコメントを見る
https://w.atwiki.jp/projecthikky/pages/90.html
今日の課題： Canvasで線の太さを変える コード https //paiza.io/projects/pxU5EuqHaifeQ8wYyAPAUw 実行結果 https //out.paiza.io/projects/pxU5EuqHaifeQ8wYyAPAUw/output.html !DOCTYPE html html head title HTML5の練習＠ヒッキープログラミングスレ /title style type="text/css" body { background-color silver; } canvas { background-color white; } /style /head body h4 線の太さを変える /h4 canvas id="mycanvas" width="640" height="480" /canvas script language="javascript" type="text/javascript" function mydraw() { var canvas = document.getElementById( mycanvas ); var ctx = canvas.getContext( 2d ); ctx.beginPath(); ctx.strokeStyle = red ; ctx.lineWidth = 20; ctx.moveTo(100, 100); ctx.lineTo(200, 200); ctx.lineTo(200, 150); ctx.lineTo(250, 150); ctx.stroke(); } mydraw(); /script /body /html lineWidth の値を変えれば線の太さを変えられる
https://w.atwiki.jp/projecthikky/pages/89.html
今日の課題 Canvasで平行移動させて描く コード https //paiza.io/projects/uCFWVuEfYO6OpQTMofLblg 実行結果 https //out.paiza.io/projects/uCFWVuEfYO6OpQTMofLblg/output.html !DOCTYPE html html head title HTML5の練習＠ヒッキープログラミングスレ /title style type="text/css" body { background-color silver; } canvas { background-color white; } /style /head body h4 平行移動させて描く /h4 canvas id="mycanvas" width="640" height="480" /canvas script language="javascript" type="text/javascript" function rad(d) { return 2.0 * Math.PI * (d / 360.0); } function mydraw() { var canvas = document.getElementById( mycanvas ); var ctx = canvas.getContext( 2d ); ctx.beginPath(); ctx.strokeStyle = red ; var i; for (i = 0; i 10; i++) { ctx.strokeRect(100, 100, 100, 50); ctx.translate(30, 20); } } mydraw(); /script /body /html translate(dx,dy) x軸方向にdxだけ、y軸方向にdyだけ描画位置を平行移動する